<template>
  <el-drawer :model-value="modelValue" title="文件上传" size="50%" :close-on-click-modal="false"
             :close-on-press-escape="false" :show-close="false">
    <el-scrollbar>
      <el-form ref="formRef">
        <el-form-item label="标题" prop="projectName">
          <el-input v-model="request.title" placeholder="请输入标题" clearable></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="projectName">
          <markdown v-model="request.content"></markdown>
        </el-form-item>
        <el-form-item label="附件">
          <el-button type="primary" style="position: relative;cursor: pointer">
            文件上传
            <input type="file" class="fileUpload" multiple
                   @change="httpRequestUpload">
          </el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <el-button @click="cancel">关闭</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-drawer>
  <common-upload v-model="upload.showUpload" :files="upload.fileList" v-if="upload.showUpload" @fileUploadFinished="fileUploadFinished"></common-upload>
</template>

<script>
import { onBeforeMount, reactive, toRefs } from 'vue'
import { addMeetMinutesUrl } from '@/api/api'
import { post } from '@/utils/httpRequest'
import CommonUpload from '@/components/commonUpload/commonUpload'

export default {
  name: 'projectMeetMinutesInfo',
  components: { CommonUpload },
  setup (props, { emit }) {
    const { id } = toRefs(props)
    const request = reactive({
      projectId: null,
      title: null,
      content: null,
      // 待上传的文件列表
      fileList: [],
      fileIds: []
    })
    const fileUploadFinished = (payload) => {
      request.fileList = payload.concat([])
      request.fileIds = payload.concat([]).map(item => {
        return item.id
      })
    }
    const cancel = () => {
      emit('update:modelValue', false)
    }
    const save = async () => {
      const result = await post(addMeetMinutesUrl, request)
      if (result.code === 200) {
        emit('save')
        cancel()
      }
    }
    const upload = reactive({
      showUpload: false,
      fileList: []
    })
    const httpRequestUpload = (data) => {
      upload.fileList = data.target.files
      upload.showUpload = true
    }
    onBeforeMount(() => {
      request.projectId = id.value
    })
    return {
      fileUploadFinished,
      upload,
      httpRequestUpload,
      cancel,
      request,
      save
    }
  },
  props: {
    id: {
      type: Number,
      default: 0,
      required: true
    },
    modelValue: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>

</style>
